<template>
  <div class="hbox">
    <h3>世界上最遥远的距离不是生与死，而是我在摸鱼，你却在上班</h3>
  </div>
  <!-- 直播区域 -->
  <div id="dplayer" style="height: 500px;width:800px ;float: left;"></div>
  <div class="diary">
    <p>7月4日</p>
    <p>新开这个项目，也为了督促自己下个项目多下些苦功。先要弄完手边的项目</p>
    <p>7月13日</p>
    <p class="p1">看直播摸鱼</p>
    <p>7月14日</p>
    <p class="p1">看直播摸鱼</p>
    <p>7月15日</p>
    <p class="p1">看直播摸鱼</p>
    <p>7月16日</p>
    <p class="p2">你可是公司老板啊！你怎么能如此堕落！先前订下的项目计划你都忘了吗？子曰：“吾日三省吾身。”不能再这样下去了！</p>
    <p>7月17日</p>
    <p class="p1">看直播摸鱼</p>
    <p>7月18日</p>
    <p class="p1">看直播摸鱼</p>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue"
import Hls from 'hls.js'
import DPlayer from 'dplayer';

onMounted(() => {
  const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
      url: 'https://d1--cn-gotcha204-3.bilivideo.com/live-bvc/588666/live_2082657599_16864526_1500/index.m3u8?expires=1703835898&len=0&oi=1899566120&pt=html5&qn=0&trid=100738baeef77c0e4b6e8a91227bb00f5a81&sigparams=cdn,expires,len,oi,pt,qn,trid&cdn=cn-gotcha204&sign=9a8be54d6f1a967754f5665acf58effd&sk=e6d0886b02b09fc7eae73c9a94740c39&p2p_type=4294967295&sl=2&free_type=0&mid=4447281&pp=rtmp&source=onetier&trace=20&site=5f0f6e3b1eb7079d9fee6e13514e1b14&qp=de_0&order=1',
      type: 'customHls',
      pic: 'https://img2.baidu.com/it/u=42222871,734946678&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
      customType: {
        customHls: function (video: any, player: any) {
          const hls = new Hls();
          hls.loadSource(video.src);
          hls.attachMedia(video);
        },
      },
    },
  });
})

</script>

<style lang="scss" scoped>
.hbox {
  width: 100%;
  height: 120px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  color: rgb(239, 71, 82);
}

.diary {
  line-height: 29px;
  width: 350px;
  padding: 10px 20px;
  box-sizing: border-box;
  float: left;
  font-size: 16px;
  color: rgb(54, 7, 171);
}

.diary .p1 {
  color: rgb(189, 20, 152);
}

.diary .p2 {
  color: rgb(222, 7, 7);
}
</style>

  